<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
            <a-form-item label="文件名称">
              <a-input placeholder="" v-model="queryParam.fileName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="文件分类">
              <a-select v-model="queryParam.fileType" placeholder="请选择文件分类">
                <a-select-option value="">全部</a-select-option>
                <a-select-option value="1">音频</a-select-option>
                <a-select-option value="2">视频</a-select-option>
                <a-select-option value="3">文档</a-select-option>
                <a-select-option value="4">图片</a-select-option>
                <a-select-option value="5">其他</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <template v-if="toggleSearchStatus">
          <a-col :md="12" :sm="24">
            <a-form-item label="上传时间" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
              <j-date v-model="queryParam.startTime" :showTime="true" date-format="YYYY-MM-DD"
                      placeholder="请选择开始时间"></j-date>
              <span style="width: 10px;">~</span>
              <j-date v-model="queryParam.endTime" :showTime="true" date-format="YYYY-MM-DD"
                      placeholder="请选择结束时间"></j-date>
            </a-form-item>
          </a-col>
          </template>

          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="sld" icon="search">查询</a-button>
              <a-button type="primary" @click="resetSelect" icon="reload" style="margin-left: 8px">重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">上传文件</a-button>
    </div>

    <!--81c61515dade2e144fe922ea4b18e09-audio.png-->
    <!--81c61515dade2e144fe922ea4b19e09-video.png-->
    <!--81c61515dade2e144fe922ea4b20e09-document.png-->
    <!--81c61515dade2e144fe922ea4b21e09-img.png-->
    <!--81c61515dade2e144fe922ea4b22e09-other.png-->
    <!--文件分类(1音频、2视频、3文档、4图片、5其他)-->

    <a-row>
      <li v-for="fd in models">
        <a-col :lg="3" :md="6" :sm="12" :xs="24" style="margin-top: 0.6%">
          <a-card style="width: 95%;">
            <template>
              <img v-if="fd.fileType == '1'" class="img-cla" alt="example" src="@/views/file/png/81c61515dade2e144fe922ea4b18e09-audio.png"/>
              <img v-else-if="fd.fileType == '2'" class="img-cla" alt="example" src="@/views/file/png/81c61515dade2e144fe922ea4b19e09-video.png"/>
              <img v-else-if="fd.fileType == '3'" class="img-cla" alt="example" src="@/views/file/png/81c61515dade2e144fe922ea4b20e09-document.png"/>
              <img v-else-if="fd.fileType == '4'" class="img-cla" alt="example" src="@/views/file/png/81c61515dade2e144fe922ea4b21e09-img.png"/>
              <img v-else class="img-cla" alt="example" src="@/views/file/png/81c61515dade2e144fe922ea4b22e09-other.png"/>
            </template>
            <a-row ><p class="text-cla">{{fd.fileName}}</p></a-row>
            <a-row>
              <a-col :span="12" align="center">
                <a @click="fileInfo(fd)">详情</a>
              </a-col>
              <a-col :span="12" align="center">
                <a  @click="fileDown(fd)">下载</a>
              </a-col>
<!--              <a-col :span="8" align="center">-->
<!--                <a-popconfirm title="确定删除吗?" @confirm="() => delFile(fd.id)">-->
<!--                  <a>删除</a>-->
<!--                </a-popconfirm>-->
<!--              </a-col>-->
            </a-row>
          </a-card>
        </a-col>
      </li>

    </a-row>

    <a-row type="flex" justify="space-around" align="middle" style="margin-top: 3%">
      <a-col :span="24" align="center">
        <a @click="getSelectMore()">{{selectMore}}</a>
      </a-col>
    </a-row>



    <file-main-modal ref="modalForm" @ok="resetSelect"></file-main-modal>
  </a-card>
</template>

<script>

import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import FileMainModal from './modules/FileMainModal'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { getFileFolderOpenURL } from '@api/api'
import { deleteAction } from '@api/manage'
import { message, Modal } from 'ant-design-vue'

export default {
  name: 'FileMainList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    FileMainModal,
  },
  props: {
    iconChooseVisible: {
      default: false
    }
  },

  data() {
    return {
      description: '他说后台管理页面',
      models: [],
      selectMore: '',
      i_current: 0,
      i_pages: 0,
      i_pageSize: 8,
      fileListData: [],
      queryParam: {},

    }
  },
  mounted() {
    const qry = {};
    qry.pageNo = 1;
    qry.pageSize = this.i_pageSize;
    this.getFileList(qry);
  },

  methods: {
    getFileList(params){
      const fileName = this.queryParam.fileName;
      const fileType = this.queryParam.fileType;
      const startTime = this.queryParam.startTime;
      const endTime = this.queryParam.endTime;
      if(fileName != undefined && fileName != ''){
        params.fileName = fileName
      }
      if(fileType != undefined && fileType != ''){
        params.fileType = fileType
      }
      if(startTime != undefined && startTime != ''){
        params.startTime = startTime
      }
      if(endTime != undefined && endTime != ''){
        params.endTime = endTime
      }
      getFileFolderOpenURL(params).then((res)=>{
        if(res.success){
          if(params.isSLD){
            this.fileListData = []
            this.fileListData = this.fileListData.concat(res.result.records);
            this.models = res.result.records
          }else {
            this.fileListData = this.fileListData.concat(res.result.records);
            this.models =this.fileListData
          }
          this.i_current = res.result.current;
          this.i_pages = res.result.pages;
          if(res.result.current == res.result.pages){
            this.selectMore = '没有更多了';
          }else if(0 == res.result.pages){
            this.selectMore = '暂无数据';
          }else {
            this.selectMore = '点击获取更多数据';
          }
        }else {
          this.selectMore = '暂无数据';
        }
      });
    },
    sld(){
      const qry = {};
      qry.isSLD = true;
      qry.pageNo = 1;
      qry.pageSize = this.i_pageSize;
      this.getFileList(qry)
    },
    resetSelect(){
      const qry = {};
      this.queryParam = {}
      this.fileListData = []
      qry.pageNo = 1;
      qry.pageSize = this.i_pageSize;
      this.getFileList(qry)
    },
    delFile(id){
      deleteAction('/file/main/true/delete', {id: id}).then((res) => {
        if (res.success) {
          this.resetSelect();
          console.log("res.message===", res.message)
          message.success(res.message);
        } else {
          message.warning(res.message);
        }
      });
    },
    getSelectMore(){
      if(this.i_current < this.i_pages){
        const qry = {};
        qry.pageNo = this.i_current + 1;
        qry.pageSize = this.i_pageSize;
        this.getFileList(qry);
      }
    },
    fileInfo(params){
      Modal.info({
        title: () => params.fileName,
        content:(
          <div>
            <p>&nbsp;</p>
            <p>文件所属人：{params.createByName}</p>
            <p>文件分类：{this.getFileType(params.fileType)}</p>
            <p>文件归档：{params.filing}</p>
            <p>文件大小：{params.fileSizeName}</p>
            <p>下载次数：{params.downCount}</p>
            <p>上传时间：{params.createTime}</p>
          </div>
        )
      });
    },
    getFileType(ft){
      if(ft == '1'){
        return '音频';
      }else if(ft == '2'){
        return '视频';
      }else if(ft == '3'){
        return '文档';
      }else if(ft == '4'){
        return '图片';
      }else{
        return '其他';
      }
    },
    async fileDown(record) {
      var elemIF = document.createElement('iframe')
      elemIF.style.display = 'none'
      elemIF.src = process.env.VUE_APP_API_BASE_URL + '/file/main/fileDown?id=' + record.id + '&filename=' + record.fileName + '&location=' + record.filePath + '&code=' + Vue.ls.get(ACCESS_TOKEN) + '&fileType=' + record.fileType + '&fileSize=' + record.fileSize + '&fileSuffix=' + record.fileSuffix
      document.body.appendChild(elemIF)
    },

  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
.text-cla{
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space:nowrap;
  text-align:center;
}
.img-cla{
  width: 100%; margin: 0 auto;
}
</style>